<template #default="scope">
  <el-container>
    <el-aside>

      <div class="block" style="height:calc(100% - 100px);">
        <h1>搜索框</h1>

        <el-table :data="tableData" highlight-current-row height="100%" style="width: 100%;height:80%;"
          :header-cell-style="{ padding: '0px', background: '#524540' }" :cell-style="{ padding: '1px' }">
          <el-table-column prop="id" label="ID" width="50"></el-table-column>
          <el-table-column prop="name" label="名称" width="100"> </el-table-column>
          <el-table-column prop="owner" label="所有者" width="80"> </el-table-column>
          <!-- <el-table-column prop="time" label="更新时间" width="80"> </el-table-column> -->
          <!-- <el-table-column prop="comment" label="备注" width="80"> </el-table-column> -->
          <el-table-column width="70">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="handleClick(scope.row)">
                浏览
              </el-button>
            </template>

          </el-table-column>

        </el-table>
        <span class="demonstration"></span>


        <el-pagination slot="trigger" layout="prev, pager, next" :total="pageinfo.total" :current-page="pageinfo.page"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageinfo.size" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
        <el-upload action="/api/uploadFile/" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload" :auto-upload="true"
          multiple>
          <!-- <el-input class="input-file" type="file" slot="trigger" ref="fileInput" style="width: 200px;"   /> -->

          <el-button slot="trigger" size="small" type="primary">上传新模型</el-button>
          <div slot="trigger" class="el-upload__tip">只能上传stl文件</div>
        </el-upload>
      </div>
    </el-aside>
    <!-- <el-main style="width: 100%;height:100%;"> -->

    <MainCanvas :ModelName="ModelName"/>
    <!-- </el-main> -->

  </el-container>

</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      ModelName:'',
      tableData: new Array(),
      pageinfo: {
        page: 1,
        size: 10,
        total: 0,
      },
    };
  },

  created() {
    this.selectModels();
  },
  methods: {
    /** 切换每页显示条数 */
    handleSizeChange(val) {
      this.pageinfo.page = 1;
      this.pageinfo.size = val;
      this.tableData = this.currentChangePage(val, this.pageinfo.page);
    },
    /** 切换分页 */
    handleCurrentChange(val) {
      this.pageinfo.page = val;
      this.tableData = this.currentChangePage(this.pageinfo.size, val);
    },
    // 分页方法(用于表格数据后端不分页，放到前端做分页)
    currentChangePage(size, current) {
      const tablePush = [];
      let array = JSON.parse(JSON.stringify(this.sourceTableData));
      array.forEach((item, index) => {
        if (size * (current - 1) <= index && index <= size * current - 1) {
          tablePush.push(item);
        }
      });
      return tablePush;
    },
    selectModels() {

      axios.post('/api/models').then(res => {

        this.sourceTableData = res.data;
        // 初始化算出第一页数据
        this.tableData = this.currentChangePage(
          this.pageinfo.size,
          this.pageinfo.page
        );
        this.pageinfo.total = this.sourceTableData.length;

      }).catch(err => {
        console.log(err)
      })
    },
    handleSuccess() {
      this.selectModels();
    },
    handleError() { },
    async  beforeUpload(file){
      const res = await axios.post('/api/fileExist', {name:file.name})

      console.log(res.data)
      // return false;
      if(res.data.exist)
      {
        this.$message.error('文件已存在，请不要重复上传');
        return Promise.reject();
      }
      else {
        return true;
        }
        
    },
    handleClick(row) {
      this.ModelName =row.name;

      console.log(row);
    },


    handleFileChange(event) {
      const file = event.target.files[0];
      // 处理文件

      console.log(file);
    }
  },


};
</script>



<style scoped>
.input-file .el-input__inner {
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  height: auto;
}

.input-file .el-input__inner input {
  display: none;
}

.input-file .el-input-group__append {
  background-color: #fff;
}
</style>
<style>
@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
</style>